import React, { PureComponent } from "react";
import JWebmap from "components/amap/WebMap";
import JTab from "components/layoutc/JTab";
import AreaSearchCar from "../components/AreaSearchCar";
import CarallDialog from "pages/vehicle/components/vehicle-dialog/CarallDialog";
import "./index.less";

class index extends PureComponent {
  constructor() {
    super();
    this.state = {
      ontab: 0,
      showMass: false,
      showMouseTool: false,
      carDialogVisible: false,
      selectCarObj: {
        pos: [106.13671854382292, 32.08089565426977],
        type: 1,
        status: 1,
        carObj: {
          no: "陕abc34",
          color: 1
        }
      }
    };
  }
  geTabTValue(params) {
    this.setState({ ontab: params });
  }
  // 点击车辆列表 地图打点
  carItemClick(index, item) {
    this.jmapchild.setOnMarkerHandler(item);
  }
  // 画区域
  drawing(type) {
    this.jmapchild.drawing(type);
  }
  // 行政区域
  drawBounds(code) {
    this.jmapchild.drawBounds(code);
  }
  // 关闭画笔
  closeDrawing() {
    this.jmapchild.closeDrawing();
  }
  // 清除地图
  closeClear() {
    this.jmapchild.closeClear();
  }

  componentDidMount() {
    setTimeout(() => {
      this.setState({
        showMass: true,
        showMouseTool: true
      });
    }, 500);
  }
  showDialog(item) {
    this.setState({ carDialogVisible: true, selectCarObj: item });
  }
  handleCancel() {
    this.setState({ carDialogVisible: false });
  }
  render() {
    return (
      <div className="container">
        <div className="left-cn">
          <div className="top">
            <div className="font-normal font-color-normal">
              当前地图中心：陕西省西安市雁塔区
            </div>
          </div>
          <div className="map-cn">
            <JWebmap
              showMass={this.state.showMass}
              showMouseTool={this.state.showMouseTool}
              ref={child => {
                this.jmapchild = child;
              }}
              showDialog={this.showDialog.bind(this)}
            />
          </div>
        </div>
        <div className="right-cn">
          <div className="tab-cn">
            <JTab tabs={["历史区域查车"]} onTab={this.geTabTValue.bind(this)} />
          </div>
          <div className="right-list">
            {this.state.ontab === 0 ? (
              <div>
                <AreaSearchCar
                  carItemClick={this.carItemClick.bind(this)}
                  drawing={this.drawing.bind(this)}
                  drawBounds={this.drawBounds.bind(this)}
                  closeDrawing={this.closeDrawing.bind(this)}
                  closeClear={this.closeClear.bind(this)}
                />
              </div>
            ) : (
              <div></div>
            )}
          </div>
        </div>
        <CarallDialog
          visible={this.state.carDialogVisible}
          carObj={this.state.selectCarObj}
          handleCancel={this.handleCancel.bind(this)}
        />
      </div>
    );
  }
}

export default index;
